<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GoMoKu</title>
    <!-- CSS -->
    <style>
        /* 去除边距 */
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 1000px;
        }
        .game_info{
            width: 600px;
            margin-top: 100px;
            margin-left: 650px;
            display: none;
        }
        table{
            width: 500px;
            height: 50px;
            border: 1px solid black;
            text-align: center;
            border-collapse: collapse;
        }
        .chessboard{
            width: 600px;
            margin-left: 650px;
            display: none;
        }


        .user_info{
            border: 1px solid black;
            width: 50px;
            height: 30px;
            padding: 0;
        }
        .game_status{
            /* text-align: center; */
            height: 30px;
            width: 50px;
        }

        .grid{
            border: 1px solid black;
            width: 50px;
            height: 50px;
            padding: 0;
            background-image: url(./assets/background.gif);
            background-size: cover;
        }
        
        .dialog_button{
            width: 140px;
            line-height: 38px;
            text-align: center;
            font-weight: bold;
            color: #0a0a0a;
            text-shadow:1px 1px 1px #333;
            border-radius: 5px;
            margin:0 20px 20px 0;
            position: relative;
            overflow: hidden;
        }

        .dialog{
            width: 600px;
            margin-left: 735px;
            margin-top: 350px;
        }


    </style>
</head>
<body>
    <!-- 加入或创建游戏  -->
    <div class="dialog">
        <h3 id="welcome" style="margin-bottom: 10px; margin-left: 100px;"></h3>

        <button class="dialog_button" id="create_game" >创建游戏</button>
        <button class="dialog_button" id="join_game" >加入游戏</button>
    </div>

    <!-- 对局信息 -->
    <div class="game_info">
        <table>
            <tr>
                <td class="user_info">Player1</td>
                <td class="user_info" id="player1_name"></td>
                <td class="user_info" id="player2_name"></td>
                <td class="user_info">Player2</td>
            </tr>
        </table>
        <table>
            <tr>
                <td class="game_status" id="turn"></td>
            </tr>
        </table>
    </div>
    <!-- 棋盘 -->
    <div class="chessboard">
        <table>
            <tr>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
            </tr>
            <tr>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
            </tr>
            <tr>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
            </tr>
            <tr>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
            </tr>
            <tr>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
            </tr>
            <tr>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
            </tr>
            <tr>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
            </tr>
            <tr>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
            </tr>
            <tr>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
            </tr>
            <tr>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
            </tr>
        </table>
    </div>
    
    <!-- js -->
    <script>
        // 消息类型
        const register = 0
        const create   = 1
        const join     = 2
        const move     = 3
        const over     = 4
        const quit     = 5

        // 状态类型
        const success  = 0
        const error    = 1

        // 执棋颜色
        const none  = 0
        const black = 1
        const white = 2

        let username = ""
        let opponent = ""

        while(!username)    username = prompt("请输入您的用户名，用户名不能为空！")



        // 连上服务器
        ws.onopen = function(){
            console.log("已经连上服务器")
            ws.send(JSON.stringify({type:register, username:username}))
        }


        // 收到消息
        ws.onmessage = function(evt) {
            let data = JSON.parse(evt.data)
            console.log(data)
        
            switch(data.type){
                // 注册信息
                case register:
                    // 注册成功
                    if(data.state == success){
                        // 为进行下一步的按钮绑定事件
                        document.getElementById("welcome").innerHTML = "您好， " + username + "!"
                        document.getElementById("create_game").onclick = create_game
                        document.getElementById("join_game").onclick = join_game
                        console.log(username+" 用户注册成功！")
                    }
                    // 用户名重复
                    else{
                        // 重新输入用户名直到不重复
                        username = ""
                        while(!username)    username = prompt("检测到用户名已重复，请重新输入用户名，用户名不能为空！")
                        ws.send(JSON.stringify({type:register, username:username}))
                    }
                    break
                
                // 创建房间
                case create:
                    // 如果房间创建成功
                    if(data.state == success){
                        // 让棋盘元素显形 让对话框隐形
                        document.getElementsByClassName("dialog")[0].style.display = "none"
                        document.getElementsByClassName("game_info")[0].style.display = "block"
                        document.getElementsByClassName("chessboard")[0].style.display = "block"

                        // 记录自己是房主
                        ishost = true
                    }
                    // 创建失败
                    else{
                        document.getElementById("welcome").innerHTML = "房间创建失败，请重试！"
                        console.log("房间创建失败")
                    }
                    break

                // 加入房间
                case join:
                    if(data.state == success){
                        opponent = data.opponent
                        // 根据自己是不是房主显示p1 p2玩家名称 先后手
                        if(ishost){
                            hostname = username
                            p1_name.innerHTML = username
                            p2_name.innerHTML = opponent
                            my_color = black
                        }
                        else{
                            hostname = opponent
                            p2_name.innerHTML = username
                            p1_name.innerHTML = opponent
                            my_color = white
                        }

                        // 初始化落子顺序 黑子说话
                        game_status.innerHTML = p1_name.innerHTML + "'s turn"

                        // 让棋盘元素显形 让对话框隐形
                        document.getElementsByClassName("dialog")[0].style.display = "none"
                        document.getElementsByClassName("game_info")[0].style.display = "block"
                        document.getElementsByClassName("chessboard")[0].style.display = "block"
                        
                        // 游戏开始 此后允许落子
                        game_start = true

                    }
                    // 加入游戏失败 可能是游戏已经开始或者 房间不存在
                    else{
                        document.getElementById("welcome").innerHTML = "加入房间失败，可能是房间不存在或对局已开始！"
                    }
                    break
                
                // 落子
                case move:
                    // 落子成功
                    if(data.state == success){
                        // 更新棋盘前端备份
                        chessboard[data.row][data.col] = data.color

                        // 修改前端棋盘
                        let colorHTML = (data.color == white) ? "url(./assets/whiteStone.gif)" : "url(./assets/blackStone.gif)"
                        document.getElementsByClassName("grid")[10*data.row + data.col].style.backgroundImage = colorHTML
                        // 修改落子顺序
                        turn = (turn == black) ? white : black

                        // 修改游戏状态
                        if(turn == black)   game_status.innerHTML = p1_name.innerHTML + "'s turn"
                        else                game_status.innerHTML = p2_name.innerHTML + "'s turn"        
                        
                    }
                    else{
                        // 其实收不到
                        console.log("落子失败")
                        
                    }
                    break
                
                // 游戏结束
                case over:
                    game_status.innerHTML = data.winner + " won!"
                    game_over = true
                    break

                default:
                    console.log("收到了错误格式的消息")

                    console.log(data)
            }


        }

        // 退出
        ws.onclose = function(){
            console.log("连接已经关闭")
        }

        // 记录当前的落子顺序 p1执黑子先行 p2执白子后行
        let turn = black
        // 游戏是否结束
        let game_over = false
        //  游戏是否开始
        let game_start = false
        // 自己是否是房主
        let ishost = false
        // 自己的执棋颜色
        let my_color = none
        // 当前游戏房间的房主名
        let hostname = ""
        // 落子锁
        // let move_lock = false

        // 游戏信息的三个组件
        let p1_name = document.getElementById("player1_name")
        let p2_name = document.getElementById("player2_name")
        let game_status = document.getElementById("turn")
        
        // 记录棋盘内容
        let chessboard = []
        for(let i=0; i<10; ++i){
            chessboard.push([0,0,0,0,0,0,0,0,0,0])
        }

        // 描述初始游戏状态
        game_status.innerHTML = "wait for your opponent to join in..."

        // 为每个格子绑定点击事件
        for(let i=0; i<100; ++i){
            document.getElementsByClassName("grid")[i].onclick = move_chess
        }

        // 创建游戏 
        function create_game(){
            // 向服务器发送创建游戏的信息
            ws.send(JSON.stringify({type:create, username:username}))
        }

        // 加入游戏
        function join_game(){
            opponent = ""
            while(!opponent)    opponent = prompt("请输入对手的用户名，用户名不能为空！")
            
            // 向服务器发送加入游戏的信息 
            ws.send(JSON.stringify({type:join, username:username, hostname:opponent}))
        }

        // 落子
        function move_chess(){
            // 如果游戏已结束
            if(game_over)   return

            // 如果游戏未开始
            if(!game_start) return 

            // 如果当前不是当前用户落子
            if(turn != my_color)    return 

            // 当前位置已经落过棋子
            if(chessboard[this.parentNode.rowIndex][this.cellIndex] != 0)   return 

            // 像服务器发送落子信息
            ws.send(JSON.stringify({type:move, hostname:hostname, color:my_color, row:this.parentNode.rowIndex, col:this.cellIndex}))
        }
    </script>
</body>
</html>